<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<style>
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
body{
  background:white;
}
.rainbow{
  height:200px;
  overflow:hidden;
}
.rainbow div{
  overflow: hidden;
}
.rainbow > div{
  width:400px;
  height:400px;
  background:red;
  border-radius:50%;
}
.rainbow > div > div{
  background:hsl(60,80%,50%);
  height:380px;
  margin:10px;
  border-radius:50%;
}
.rainbow > div > div > div{
  background:hsl(120,80%,50%);
  height:360px;
  margin:10px;
  border-radius:50%;
}
.rainbow > div > div > div > div{
  background:hsl(180,80%,50%);
  height:340px;
  margin:10px;
  border-radius:50%;
}
.rainbow > div > div > div > div > div{
  background:hsl(240,80%,50%);
  height:320px;
  margin:10px;
  border-radius:50%;
}
.rainbow > div > div > div > div > div > div{
  background:hsl(300,80%,50%);
  height:300px;
  margin:10px;
  border-radius:50%;
}
.rainbow > div > div > div > div > div > div > div{
  background:hsl(330,80%,50%);
  height:280px;
  margin:10px;
  border-radius:50%;
}
.rainbow > div > div > div > div > div > div > div > div{
  background:hsl(330,80%,100%);
  height:260px;
  margin:10px;
  border-radius:50%;
}
</style>
<body>
  <div class="rainbow">
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>